<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/resources/global/jsp/init.jsp" />
<title>用户朋友圈管理界面</title>
<style type="text/css">
body {
	text-align: center;
}

#div_button_group {
	width: 100%;
	height: 30px;
	position: fixed;
	top: 0;
	opacity: 0.75;
	margin-right: auto;
	margin-left: auto;
	margin-top: 70px;
}

textarea {
	resize: none;
	height: 50px;
	width: 600px;
}

#tbl_moment thead th {
	background-color: rgb(156, 186, 95);
	color: #fff;
	border-bottom-width: 0;
}

/* Column Style */
#tbl_moment td {
	color: #000;
}
/* Heading and Column Style */
#tbl_moment tr, #tbl_moment th {
	border-width: 1px;
	border-style: solid;
	border-color: rgb(156, 186, 95);
}

/* Padding and font style */
#tbl_moment td {
	padding: 5px 10px;
	font-size: 14px;
	font-family: Verdana;
	font-weight: bold;
	text-align: left;
}

#tbl_moment th {
	padding: 5px 10px;
	font-size: 14px;
	font-family: Verdana;
	font-weight: bold;
}

a {
	text-transform: none;
	text-decoration: none;
}
</style>
</head>
<script type="text/javascript">
	var contextPath = '${pageContext.request.contextPath}';
	var currentLoginedUserUUID = "${currentLoginedUser.uuid}";
	var pageNo = 1;
	var rows = 10;
	$(function() {
		//当前登陆用户的UUID
		getMomentForIndex(currentLoginedUserUUID, pageNo, rows);
		$("#addMoment").on("click", function() {
			$.ajax({
				url : 'doAddMoment.do',
				dataType : 'json',
				type : 'post',
				data : {
					content : $("#content").val()
				},
				success : function(data) {
					if (data.success) {
						var currentPageNo = parseInt($("#lbl_pageNo").html(), 10);
						getMomentForIndex(currentLoginedUserUUID, currentPageNo, rows);
						$("#content").val("");
					} else {
						alert("朋友圈添加失败");
					}
				}
			});
		});
		
		$("#firstPage").bind("click", function() {
			getMomentForIndex(currentLoginedUserUUID, 1, rows);
		});
		$("#prePage").bind("click", function() {
			var currentPageNo = parseInt($("#lbl_pageNo").html(), 10);
			getMomentForIndex(currentLoginedUserUUID, currentPageNo - 1, rows);
		});
		$("#nextPage").bind("click", function() {
			var currentPageNo = parseInt($("#lbl_pageNo").html(), 10);
			getMomentForIndex(currentLoginedUserUUID, currentPageNo + 1, rows);
		});
		$("#lastPage").bind("click", function() {
			var totalCount = parseInt($("#lbl_totalCount").html(), 10);
			//前者向上取整，后者向下取整
			var lastPageNo = totalCount % rows > 0 ? Math.ceil(totalCount / rows) : Math.floor(totalCount / rows);
			getMomentForIndex(currentLoginedUserUUID, lastPageNo, rows);
		});
		//初始化退出链接
		$("#logout").on('click', function() {
			$.ajax({
				url : 'doNotNeedSecurityLogout.do',
				dataType:'json',
				type : 'post',
				success : function(data){
					if(data.success) {
						window.parent.location='#';
						top.location=data.obj;
					}
				}
			});
		});
		
		$("#index").bind("click", function() {
			window.parent.location='#';
			top.location = contextPath + "/";
		});
	});
	function getMomentForIndex(currentLoginedUserUUID, pageNo, rows) {
		//获取最新的10条朋友圈
		$.ajax({
			url : 'doShowUserMomentList.do',
			dataType : 'json',
			type : 'post',
			data : {
				page : pageNo,
				rows : rows,
				sort : new Array("create_date", "create_time"),
				order : new Array("asc", "desc"),
				userUUID : currentLoginedUserUUID
			},
			success : function(data) {
				if(data && data.rows && data.rows.length > 0) {
					$("#lbl_totalCount").html(data.total);
					$("#lbl_pageNo").html(pageNo > 0 ? pageNo : 1);
					//移除<tr>元素
					$("#tbl_moment tbody tr").remove();
					for(var i in data.rows) {
						var jsonObject = data.rows[i];
						var trBegin = "<tr>";
						var id = "<td>" + (parseInt(i,10)+1) + "</td>";
						trBegin += id;
						var content = "<td>" + jsonObject.content + "</td>";
						trBegin += content;
						var dateTime = "<td>" + jsonObject.createDateDescr + " " + jsonObject.createTimeDescr + "</td>";
						trBegin += dateTime;
						var trEnd = "</tr>";
						trBegin += "<td><button onclick=deleteMoment('" + jsonObject.uuid + "') id='btn_"+ jsonObject.uuid +"'>delete</button></td>";
						trBegin += trEnd;
						
						if(jsonObject.favouriedMngUserModels && jsonObject.favouriedMngUserModels.length != 0) {
							//点赞用户用一行tr显示
							var trFavourited = "<tr><td>点赞用户:</td><td colspan='3'>";
							var userNameArray = new Array();
							for(var j in jsonObject.favouriedMngUserModels) {
								userNameArray.push(jsonObject.favouriedMngUserModels[j].name);
							}
							trFavourited += userNameArray.join(",");
							trFavourited += "</td></tr>";
							trBegin += trFavourited;
						}
						
						$("#tbl_moment tbody").append(trBegin);
					}
				} 
			}
		});
	}
	function deleteMoment(momentUUID) {
		$.ajax({
			url : 'deleteMoment.do',
			dataType : 'json',
			type : 'post',
			data : {
				momentUUID : momentUUID,
				userUUID : currentLoginedUserUUID
			},
			success : function(data) {
				if(data.success) {
					var currentPageNo = parseInt($("#lbl_pageNo").html(), 10);
					$("#tbl_moment tbody tr").remove();
					$("#lbl_totalCount").html(0);
					getMomentForIndex(currentLoginedUserUUID, currentPageNo, rows)
				}
			}
		});
	}
</script>
<body>
	<div>
		<textarea rows="1" cols="150" id="content"></textarea>
		<br />
	</div>
	<div id="div_button_group">
		<!-- begin:置顶栏 -->
		<button id="addMoment">发表朋友圈</button>
		<button id="logout">注销登陆</button>
		<button id="index">返回首页</button>
		<!-- after:置顶栏 -->
	</div>
	<div style="text-align: center;margin-top: 50px;">
		<table id="tbl_moment" style="margin:auto;">
			<thead>
				<tr>
					<th></th>
					<th style="width: 600px;">朋友圈内容</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<div>
		<a href="#" id="firstPage">&lt;&lt;首页</a>&nbsp;
		<a href="#" id="prePage">&lt;上一页</a>&nbsp;
		第<label id="lbl_pageNo">1</label>页(共<label id="lbl_totalCount">0</label>条)&nbsp;
		<a href="#" id="nextPage">下一页&gt;</a>&nbsp;
		<a href="#" id="lastPage">尾页&gt;&gt;</a>&nbsp;
	</div>
</body>
</html>